<template>
  <div>
   <el-main>
   <div class="main-container">
       <!-- 机构概述 -->
      <el-card class="box-cardleft">
      <div class="content">
         <div class="left-content">
         <div class="institutionalOverview">机构概述</div>
        <div class="left-t">
          <div class="name">西三旗分拣中心</div>
          <div class="address">地址:北京顺义区天澜综合保税区123号</div>
          <div class="duty-people">负责人：赵五金 16712345678</div>
          <el-button class="search-sales-department">查看营业部分布</el-button>
        </div>
       </div>
       <div class="right-content">
           <div class="item">
            <div class="label">分拣中心(个)</div>
            <div class="num">1</div>
           </div>
          <div class="item">
            <div class="label">营业部(个)</div>
            <div class="num">4</div>
           </div>
           <div class="item">
            <div class="label">司机人数(个)</div>
            <div class="num">48</div>
           </div>
           <div class="item">
            <div class="label">快递员人数(个)</div>
            <div class="num">64</div>
           </div>
       </div>
      </div>
      </el-card>
      <!-- 今日数据 -->
  <el-card class="el-card-right">
   <div >
    <div class="header">
       <p>今日数据</p>
    <div class="refresh-box"> <i></i> 2023-02-18 22:48</div>
    </div>
  <div class="right-info">
    <!-- one -->
<div class="neirong-center-one">
   <div class="label">订单金额(元)</div>
    <div class="my-number1">2,284</div>
    <div class="shuju-bottom">较昨日 +342</div>
</div>
<!-- two -->
<div class="neirong-center-one">
   <div class="label">订单数量(笔)</div>
    <div class="my-number1">193</div>
    <div class="shuju-bottom">较昨日 +27</div>
</div>
<!-- three -->
<div class="neirong-center-one">
   <div class="label">运输任务(次)</div>
    <div class="my-number1">38</div>
    <div class="shuju-bottom">较昨日 +26 </div>
</div>
  </div>
   </div>
  </el-card>
   </div>
  <!-- 代办任务 -->
  <div class="two-two">
     <el-card class="box-card">
      <!-- 第三个盒子 -->
      <div class="card-three">
        <div class="card-three-top">
          <div>待办任务</div>
          <div>123</div>
        </div>
        <!-- 三下 -->
        <div class="card-three-bottom" >
          <div id="main1" style="width: 170px; height: 170px" ></div>
          <div id="main2" style="width: 170px; height: 170px" ></div>
          <div id="main3" style="width: 170px; height: 170px" ></div>
          <div id="main4" style="width: 170px; height: 170px" ></div>
        </div>
        <el-row class="daiqujian">
          <el-col>代取件</el-col>
          <el-col>待派件</el-col>
          <el-col>未分配运输</el-col>
          <el-col class="caoshiyunshu">超时运输</el-col>
        </el-row>
      </div>
      </el-card>
      <!-- 执行中任务 -->
<el-card class="el-card-right-two">
  <div class="el-card-right-two-top">
    <div>执行中任务</div>
    <div>123</div>
  </div>
  <!-- 四下 -->
  <div class="el-card-right-two-bottom">
    <div id="main5" style="width: 170px; height: 170px" ></div>
    <div id="main6" style="width: 170px; height: 170px" ></div>
  </div>
   <el-row class="yunshuzhong">
      <el-col>运输中</el-col>
      <el-col class="paisong">派送中</el-col>
    </el-row>
  </el-card>
  </div>
  <!-- 常用功能 -->
<el-card class="Common-functions">
 <p>常用功能</p>
 <div class="Express-operation">
<div class="Express-operation-item">
  <img src="../../assets/com/kuaidi.png">
  <p>快递作业</p>
</div>
<div class="Express-operation-item">
  <img src="../../assets/com/yunshu.png">
  <p>运输任务</p>
</div><div class="Express-operation-item">
  <img src="../../assets/com/xianlu.png">
  <p>线路管理</p>
</div><div class="Express-operation-item">
  <img src="../../assets/com/cheliang.png">
  <p>车辆管理</p>
</div><div class="Express-operation-item">
  <img src="../../assets/com/siji.png">
  <p>司机管理</p>
</div><div class="Express-operation-item">
  <img src="../../assets/com/yunfei.png">
  <p>运费查询</p>
</div>
 </div>
</el-card>
<!-- 线路管理 -->
<lineManagement  />
    </el-main>
  </div>
</template>

<script>
import * as echarts from 'echarts'
import 'echarts-liquidfill/src/liquidFill.js' // 在这里引入
export default {
  name: 'wl-zhuye',
  data () {
    return {}
  },
  mounted () {
    // 基于准备好的dom，初始化echarts实例
    const myChart1 = echarts.init(document.getElementById('main1'))
    const myChart2 = echarts.init(document.getElementById('main2'))
    const myChart3 = echarts.init(document.getElementById('main3'))
    const myChart4 = echarts.init(document.getElementById('main4'))
    const myChart5 = echarts.init(document.getElementById('main5'))
    const myChart6 = echarts.init(document.getElementById('main6'))
    // 指定图表的配置项和数据
    const option1 = {
      backgroundColor: '#fff', // 背景色
      series: [
        {
          type: 'liquidFill', // 水位图
          radius: '80%', // 显示比例
          center: ['50%', '50%'], // 中心点
          amplitude: 5, // 水波振幅
          data: [0.5], // data个数代表波浪数
          color: [
            {
              type: 'linear',
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [
                {
                  offset: 0,
                  color: '#e25c3f'
                },
                {
                  offset: 1,
                  color: '#e25c3f'
                }
              ],
              globalCoord: false
            }
          ], // 波浪颜色
          backgroundStyle: {
            borderWidth: 0.5, // 外边框
            borderColor: '#fff', // 边框颜色
            color: '#ffe5e0' // 边框内部填充部分颜色
          },
          label: {
            // 标签设置
            position: ['50%', '45%'],
            formatter: '42%', // 显示文本,
            textStyle: {
              fontSize: '16px', // 文本字号,
              color: '#fff'
            }
          },
          outline: {
            // show: false,
            borderDistance: 5,
            itemStyle: {
              borderWidth: 2,
              borderColor: '#e25c3f'
            }
          }
        }
      ]
    }
    const option2 = {
      backgroundColor: '#fff', // 背景色
      series: [
        {
          type: 'liquidFill', // 水位图
          radius: '80%', // 显示比例
          center: ['50%', '50%'], // 中心点
          amplitude: 5, // 水波振幅
          data: [0.5], // data个数代表波浪数
          color: [
            {
              type: 'linear',
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [
                {
                  offset: 0,
                  color: '#ffc45e'
                },
                {
                  offset: 1,
                  color: '#ffc45e'
                }
              ],
              globalCoord: false
            }
          ], // 波浪颜色
          backgroundStyle: {
            borderWidth: 1, // 外边框
            borderColor: '#fff', // 边框颜色
            color: '#fff1d9' // 边框内部填充部分颜色
          },
          label: {
            // 标签设置
            position: ['50%', '45%'],
            formatter: '31%', // 显示文本,
            textStyle: {
              fontSize: '16px', // 文本字号,
              color: '#fff'
            }
          },
          outline: {
            // show: false
            borderDistance: 5,
            itemStyle: {
              borderWidth: 2,
              borderColor: '#ffc45e'
            }
          }
        }
      ]
    }
    const option3 = {
      backgroundColor: '#fff', // 背景色
      series: [
        {
          type: 'liquidFill', // 水位图
          radius: '80%', // 显示比例
          center: ['50%', '50%'], // 中心点
          amplitude: 5, // 水波振幅
          data: [0.5], // data个数代表波浪数
          color: [
            {
              type: 'linear',
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [
                {
                  offset: 0,
                  color: '#ff9b41'
                },
                {
                  offset: 1,
                  color: '#ff9b41'
                }
              ],
              globalCoord: false
            }
          ], // 波浪颜色
          backgroundStyle: {
            borderWidth: 1, // 外边框
            borderColor: '#fff', // 边框颜色
            color: '#fff1d9' // 边框内部填充部分颜色
          },
          label: {
            // 标签设置
            position: ['50%', '45%'],
            formatter: '29%', // 显示文本,
            textStyle: {
              fontSize: '16px', // 文本字号,
              color: '#fff'
            }
          },
          outline: {
            // show: false
            borderDistance: 5,
            itemStyle: {
              borderWidth: 2,
              borderColor: '#ff9b41'
            }
          }
        }
      ]
    }

    const option4 = {
      backgroundColor: '#fff', // 背景色
      series: [
        {
          type: 'liquidFill', // 水位图
          radius: '80%', // 显示比例
          center: ['50%', '50%'], // 中心点
          amplitude: 5, // 水波振幅
          data: [0.5], // data个数代表波浪数
          color: [
            {
              type: 'linear',
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [
                {
                  offset: 0,
                  color: '#edde83'
                },
                {
                  offset: 1,
                  color: '#edde83'
                }
              ],
              globalCoord: false
            }
          ], // 波浪颜色
          backgroundStyle: {
            borderWidth: 1, // 外边框
            borderColor: '#fff', // 边框颜色
            color: '#fafade' // 边框内部填充部分颜色
          },
          label: {
            // 标签设置
            position: ['50%', '45%'],
            formatter: '41%', // 显示文本,
            textStyle: {
              fontSize: '16px', // 文本字号,
              color: '#fff'
            }
          },
          outline: {
            // show: false
            borderDistance: 5,
            itemStyle: {
              borderWidth: 2,
              borderColor: '#ff9b41'
            }
          }
        }
      ]
    }
    const option5 = {
      backgroundColor: '#fff', // 背景色
      series: [
        {
          type: 'liquidFill', // 水位图
          radius: '80%', // 显示比例
          center: ['50%', '50%'], // 中心点
          amplitude: 5, // 水波振幅
          data: [0.5], // data个数代表波浪数
          color: [
            {
              type: 'linear',
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [
                {
                  offset: 0,
                  color: '#e25c3f'
                },
                {
                  offset: 1,
                  color: '#e25c3f'
                }
              ],
              globalCoord: false
            }
          ], // 波浪颜色
          backgroundStyle: {
            borderWidth: 0.5, // 外边框
            borderColor: '#fff', // 边框颜色
            color: '#ffe5e0' // 边框内部填充部分颜色
          },
          label: {
            // 标签设置
            position: ['50%', '45%'],
            formatter: '42%', // 显示文本,
            textStyle: {
              fontSize: '16px', // 文本字号,
              color: '#fff'
            }
          },
          outline: {
            // show: false,
            borderDistance: 5,
            itemStyle: {
              borderWidth: 2,
              borderColor: '#e25c3f'
            }
          }
        }
      ]
    }
    const option6 = {
      backgroundColor: '#fff', // 背景色
      series: [
        {
          type: 'liquidFill', // 水位图
          radius: '80%', // 显示比例
          center: ['50%', '50%'], // 中心点
          amplitude: 5, // 水波振幅
          data: [0.5], // data个数代表波浪数
          color: [
            {
              type: 'linear',
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [
                {
                  offset: 0,
                  color: '#ffc45e'
                },
                {
                  offset: 1,
                  color: '#ffc45e'
                }
              ],
              globalCoord: false
            }
          ], // 波浪颜色
          backgroundStyle: {
            borderWidth: 1, // 外边框
            borderColor: '#fff', // 边框颜色
            color: '#fff1d9' // 边框内部填充部分颜色
          },
          label: {
            // 标签设置
            position: ['50%', '45%'],
            formatter: '32%', // 显示文本,
            textStyle: {
              fontSize: '16px', // 文本字号,
              color: '#fff'
            }
          },
          outline: {
            // show: false
            borderDistance: 5,
            itemStyle: {
              borderWidth: 2,
              borderColor: '#ffc45e'
            }
          }
        }
      ]
    }
    // 使用刚指定的配置项和数据显示图表。
    myChart1.setOption(option1)
    myChart2.setOption(option2)
    myChart3.setOption(option3)
    myChart4.setOption(option4)
    myChart5.setOption(option5)
    myChart6.setOption(option6)
    //
  }

}
</script>

<style lang="scss" scoped>
 .el-container:nth-child(5) .el-aside,
  .el-container:nth-child(6) .el-aside {
    line-height: 260px;
  }
  .sidebar-logo-container {
    width: 210px!important;
    background-color: #fff;
    height: 100vh;
    font-size: 0;
    top: 0;
    bottom: 0;
    left: 0;
    z-index: 1001;
    overflow: hidden;
  }
  .biaoshi {
    position: relative;
    height: 113px;
    line-height: 70px;
    text-align: center;
    overflow: hidden;
    padding: 20px 20px 0;
    width: 152px;
    margin-bottom: 20px;
  }
  .el-menu-vertical-demo{
    margin-bottom: -17px;
  }

.touxiang-right {
  position: relative;
  cursor: pointer;
    width: 35px;
    height: 35px;
    border-radius: 15px;
    vertical-align: middle;
    margin-right: 10px;
}
.box-cardleft {
  margin-top: 60px;
  width: 56.33%;
  padding-left: 12px;
  padding-right: 12px;

}
.left-content {
    padding-left: 10px;
    -webkit-box-flex: 50%;
    -ms-flex: 50%;
    flex: 50%;
    border-right: 1px solid #ebeef5;
}
.institutionalOverview {
  font-size: 16px;
    font-weight: 700;
}
.name {
      font-size: 16px;
    margin-top: 20px;
    margin-bottom: 13px;
}
.address {
      font-size: 14px;
    color: #818693;
}
.duty-people{
      font-size: 14px;
    color: #818693;
    margin-top: 8px;
}
.search-sales-department {
  display: -webkit-box;
    display: flex;
    -webkit-box-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    align-items: center;
    margin-top: 20px;
    font-size: 14px;
    color: #e15536;
    width: 158px;
    height: 40px;
    background: #ffeeeb;
    border: 1px solid #f3917c;
    border-radius: 4px;
    cursor: pointer;
}
.right-content {
  display: flex;
  flex: 50%;
  width: 300px;
  flex-wrap: wrap;
}
.content{
    position: relative;
    display: flex;
}
.item {
  flex: 50%;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    height: 85px;
    flex-direction: column;
    -webkit-box-align: center;
    align-items: center;
    display: flex;
}
.num {
  font-size: 32px;
    font-weight: 700;
    color: #e15536;
    cursor: pointer;
  margin-top: 6px;
  margin-right: 50px;
}
.main-container {
  display: flex;
  transition: margin-left .28s;
  margin-bottom: 20px;
  margin-top: -80px;
}
.el-card is-always-shadow {
  width: 41%;
}
.el-card-right{
  width: 41%;
  margin-left: 20px;
  margin-top: 60px;
}
.header {
 margin-top: -16px;
  display: flex;
  -webkit-box-pack: justify;
  justify-content: space-between;
  -webkit-box-align: baseline;
  align-items: baseline;
  p {
    font-size: 16px;
    color: #20232a;
    font-weight: 700;
  }
}
.refresh-box {
  background-image: url();
  font-size: 14px;
  color: #818693;
  display: flex;
  align-items: center;
    cursor: pointer;
}
.right-info {
display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-content: space-between;
}
.neirong-center-one {
  width: 30%;
  font-size: 36px;
  color: #20232a;
}
.shuju-bottom {
  // width: 35%;
  margin-left: -50px;
}
.label {
font-size: 14px;
    color: #20232a;
    margin-bottom: 21px;
}
.my-number1 {
font-size: 36px;
    color: #20232a;
    font-weight: 700;
    margin-bottom: 24px;
}
.shuju-bottom {
font-size: 14px;
    color: #818693;
    margin-bottom: 20px;
    display: flex;
    -webkit-box-pack: center;
    justify-content: center;
    margin-right: 6px;
}
.two-two{
  // width: 100%;
   display: flex;
  justify-content: space-between;
  margin-right: 10px;
}

.el-card-right-two {
width: 40%;
margin-right: - 10px;
padding-left: 10px;
}
.card-three {
  height: 273px;
  margin-right: -35px;
}
.card-three-top {
  display: flex;
  justify-content: space-between;
  margin-right: 50px;
}
.card-three-bottom{
display: flex;
//  flex-wrap: wrap;
margin-top: 20px;
}
.card-three-bottom-item {
margin-right: 10px;
// width: calc((100% - 20px) / 4);
width: 25%;
 margin-top: 80px;
}
.card-three-bottom-item:nth-child(1){
  margin-left: 70px;

}
// .card-three-bottom-item:nth-of-type(4n+0) {
//   margin-right: 0;
// }
.el-card-right-two-top {
  display: flex;
  justify-content: space-between;
}
.el-card-right-two-bottom{
  display: flex;
   justify-content: space-around;
  //  align-items: center;
  margin-top: 20px;

}
.el-card-right-two-bottom-item {
width: 50%;
text-align: center;
margin-top: 80px;
}
.daiqujian {
  display: flex;
  margin-left: 60px;
  // flex-wrap: wrap;
  align-content: space-evenly;
  font-weight: 700;
}
.caoshiyunshu {
  margin-right: -30px;
}
.yunshuzhong {
  display: flex;
  justify-content: space-between;
  margin-left: 84px;
  font-weight: 700;
}
.paisong {
  margin-right: -58px;
}
.Common-functions {
  margin-top: 20px;
}
.Express-operation {
  display: flex;
  justify-content: space-around;
}

.touxiangde {
  cursor: pointer;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    vertical-align: middle;
    margin-right: 8px;
}
.Express-operation-item {
  width: 15.15%;
    height: 116px;
    background: #fafafb;
    border-radius: 10px;
    cursor: pointer;
}
.Express-operation-item img {
  width: 40px;
    height: 40px;
    margin: 0 auto;
    display: block;
    margin-top: 20px
}
.Express-operation-item p {
  font-size: 16px;
    color: #20232a;
    font-weight: 700;
    text-align: center;
}
</style>
